<!DOCTYPE html>
<html>

<head>
	<meta charset="utf-8" />
	<meta name="viewport"
		content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, user-scalable=0">
	<meta name="renderer" content="webkit" />
	<meta name="force-rendering" content="webkit" />
	<title>会员中心</title>
	<link rel="stylesheet" type="text/css" href="css/common.css" />
	<link rel="stylesheet" type="text/css" href="css/index.css" />
	<link rel="stylesheet" type="text/css" href="css/popup.css" />
	<script src="js/config.js"></script>
	<script src="https://unpkg.zhimg.com/axios/dist/axios.min.js"></script>
	<script src="js/axios-config.js?v=4"></script>
	<script src="https://cdn.jsdelivr.net/npm/vue"></script>
	<script src="js/component.js?v=10"></script>
	<script src="http://res.wx.qq.com/open/js/jweixin-1.6.0.js"></script>
</head>

<body style="background-color: #F9F9F9;">
	<div id="app" v-cloak>
		<template v-if="user">
			<div class="huiyuanzhongxin">
				<div class="huiyuanzhongxin-top">
					<div class="huiyuanzhongxin-text d-f a-c-c">
						<img :src="user.avatar_url" v-if="user.avatar_url" class="hyzx-text-logo" />
						<img src="img/wode/VIP_01.png" class="hyzx-text-logo" v-else />
						<div class="hyzx-text-xq">
							<p class="hyzx-text-name">{{ user.nick_name }}</p>
							<p class="hyzx-text-id">ID:{{user.id + 10000}}</p>
						</div>
					</div>
					<div class="huiyuanzhongxin-foot d-f a-c-c j-c-s">
						<span v-if="user.vip">
							医课VIP有效期至 {{ user.vip.expire }}
						</span>
						<span v-else>
							未开通
						</span>
					</div>
				</div>
			</div>
			<div class="kthy-cells">
				<template v-for="item in list">
					<div class="kthy-cell-list" :class="{action:selected==item.id}" @click="selected=item.id">
						<p class="kthy-list-title">{{ item.title }}</p>
						<p class="kthy-list-jiage">
							<span style="font-size: 0.3rem;">￥</span>{{ parseFloat(item.fee) }}
						</p>
						<p class="kthy-list-jiage2">¥{{ parseFloat(item.origin_fee) }}</p>
						<p class="kthy-list-foot">限时享{{ getDiscount(item.fee,item.origin_fee) }}折优惠</p>
					</div>
				</template>
			</div>
			<div class="lijijiaru">
				<a href="javascript:;" class="lijijiaru-btn" @click="pay()">
					立即{{ 0 != user.vip_expire ? '续费' : '开通' }}
				</a>
			</div>
		</template>
	</div>
	<!-- <div class="zhuanshuquanyi">
		<div class="zsqy-top">
			<img src="img/wode/VIP_07.png" class="zsqy-top-title" />
		</div>
		<div class="zhuanshuquanyi-cells d-f a-c-c">
			<div class="zhuanshuquanyi-cell-list">
				<img src="img/wode/VIP_08.png" class="zsqy-icon" />
				<p class="zsqy-text">短语智能识别</p>
			</div>
			<div class="zhuanshuquanyi-cell-list">
				<img src="img/wode/VIP_13.png" class="zsqy-icon" />
				<p class="zsqy-text">离线缓存视频</p>
			</div>
			<div class="zhuanshuquanyi-cell-list">
				<img src="img/wode/VIP_11.png" class="zsqy-icon" />
				<p class="zsqy-text">口语多位评分</p>
			</div>
			<div class="zhuanshuquanyi-cell-list">
				<img src="img/wode/VIP_17.png" class="zsqy-icon" />
				<p class="zsqy-text">后台播放视频</p>
			</div>
			<div class="zhuanshuquanyi-cell-list">
				<img src="img/wode/VIP_23.png" class="zsqy-icon" />
				<p class="zsqy-text">听力等级课程</p>
			</div>
			<div class="zhuanshuquanyi-cell-list">
				<img src="img/wode/VIP_24.png" class="zsqy-icon" />
				<p class="zsqy-text">口语场景课程</p>
			</div>
			<div class="zhuanshuquanyi-cell-list">
				<img src="img/wode/VIP_25.png" class="zsqy-icon" />
				<p class="zsqy-text">发音专项训练</p>
			</div>
			<div class="zhuanshuquanyi-cell-list">
				<img src="img/wode/VIP_26.png" class="zsqy-icon" />
				<p class="zsqy-text">听力专项训练</p>
			</div>
		</div>
	</div> -->
	<div>
		<img src="img/wode/vip02.png" alt="">
		<img src="img/wode/vip03.png" alt="">
		<img src="img/wode/vip04.png" alt="">
		<img src="img/wode/vip05.png" alt="">
		<img src="img/wode/vip06.png" alt="">
		<img src="img/wode/vip07.png" alt="">
		<img src="img/wode/vip08.png" alt="">
		<img src="img/wode/vip09.png" alt="">
		<img src="img/wode/vip10.png" alt="">
		<img src="img/wode/vip11.png" alt="">
		<img src="img/wode/vip12.png" alt="">
		<img src="img/wode/vip13.png" alt="">
		<img src="img/wode/vip14.png" alt="">
		<img src="img/wode/vip15.jpg" alt="" @click="pay()">
	</div>
</body>

<script>
	var app = new Vue({
		el: '#app',
		data() {
			return {
				list: [],
				selected: null,
				user: null
			}
		},
		mounted() {
			this.getInfo();
			this.getList();
		},
		methods: {
			getInfo() {
				axios.get('/mp/wechatUser/getUserInfo').then(e => {
					this.user = e.data;
				});
			},
			getList() {
				axios.get('/mp/order/all').then(e => {
					this.list = e.data;
				});
			},

			getDiscount(fee, origin_fee) {
				const discount = parseInt(fee / origin_fee * 100);
				return discount.toString().replace(/0$/, '');
			},

			pay() {
				let id = this.selected;
				if (!id) {
					id = this.list[0].id;
				}
				axios.post('/mp/order/order', { id, type: 'vip' }).then(e => {
					WeixinJSBridge.invoke('getBrandWCPayRequest', {
						"appId": e.data.appId,
						"nonceStr": e.data.nonceStr,
						"package": e.data.package,
						"paySign": e.data.paySign,
						"signType": e.data.signType,
						"timeStamp": e.data.timeStamp,
					}, function (res) {
						switch (res.err_msg) {
							case 'get_brand_wcpay_request:cancel':
								// alert('用户取消支付！');
								break;
							case 'get_brand_wcpay_request:fail':
								// alert('支付失败！（' + res.err_desc + '）');
								break;
							case 'get_brand_wcpay_request:ok':
								// alert('支付成功！');
								window.history.back();
								break;
							default:
								// console.log(JSON.stringify(res));
								// alert(JSON.stringify(res));
								break;
						}
					});
				});
			},
		}
	})
</script>

</html>